<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<title>申请</title>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="blue">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<meta name="description" content="履保科技">
		<meta name="Keywords" content="履保科技">
	</head>
	<body>
		<div class="mains">
<style>
    [v-cloak]{display: none;}
    input{border:none;outline: none;min-width: 50px;}
    i,em,b{font-style: normal;}
    .flex{display: flex;align-items: center;}
    .flex.b{justify-content: space-between;}
    .flex.c{justify-content: center}
    .fz15{font-size: 15px;}
    *{margin: 0; padding: 0;box-sizing: border-box}
  img {width: 100%; border-style: none; vertical-align: top;}
  a{text-decoration: none;-webkit-tap-highlight-color: rgba(255, 0, 0, 0);}
  li{list-style: none;}
  body{font-size: 0.28rem;color: #333;}
  .mainCont{max-width: 500px; margin:0 auto;position: relative;min-height: 100vh;background: #f5f5f5;}
  .topimg{
    width: 100%;
  }
  .con{
    position: absolute;left: 0;top: 1.9rem;width: 100%;padding: 0 17px;
  }
  .con>div{background: #fff;border-radius: 0.1rem;}
  .product img{
    max-width: 1rem;
    max-height: 1rem;
  }
  .product .name{height: 1.4rem;font-size: 0.32rem;position: absolute;display: flex;justify-content: center;width: 100%;left: 0;top: -0.6rem;}
  .product .name .infos{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .product .name .infos>div{
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #fff;
    box-shadow: 0 0 3px #eee;
    margin-bottom: 5px;
  }
  .area1{padding-top: 1.4rem}
  .product .des {
    padding-bottom: 0.24rem;
  }
  .product .des li{
    width: 33.3%;
    border-left: 1px solid #f0f0f0;
    text-align: center;
  }
  .product .des li:first-child{
    border-left: none;
  }

  .product .des li span{
    color: #d81a24
  }
  .product .des li p{
    font-size: 0.24rem;
  }
  .area2{
    padding: 5px 20px 20px;
    margin-top: 0.3rem;
  }
  .inpItem{
    height: 0.94rem;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
  }
  .inpItem span{margin-right: 0.36rem;width: 1.22rem;flex-shrink: 0;}
  .inpItem input{font-size: 0.28rem;flex-grow: 1;}
  .getcode{color: #229e7f;border:1px solid #229e7f;border-radius: 50px;flex-shrink: 0;padding:0 0.1rem;}
  .getcode.sended{
    border: none;
    color: #999;
  }
  .login{
    background: #229e7f;
    color: #fff;
    line-height: 0.76rem;
    font-size: 0.32rem;
    text-align: center;
    display: block;
    margin-top: 0.76rem;
    border-radius: 50px;
  }

    .mask {
        position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
        z-index: 1002; left: 0px;
        opacity:0.5; -moz-opacity:0.5;
        display:none;
    }
</style>
			<div class="mainCont" id="app">
				<div>
					<div class="topimg">
						<img src="img/ytop.png" alt="">
					</div>
					<div class="con">
						<div class="area1 product">
							<div class="name">
								<div class="infos">
									<div>
										<img th:src="'http://test.lvbaoins.com/' + ${product.picUrl}" alt="">
									</div>
									<span th:text="${product.productName}"></span>
									<!--<a th:text="${{item.name}}"></a>-->
								</div>
							</div>
							<ul class="des flex">

								<li>
									<span>最高额度</span>
									<p th:text="${product.price}"></p>
								</li>
								<li>
									<span>贷款利率</span>
									<p th:text="${product.rate}"></p>
								</li>
								<li>
									<span>授信期限</span>
									<p th:text="${product.periods}"></p>
								</li>
							</ul>
						</div>
						<div class="area2">
							<input type="hidden" id="productId" th:value="${product.id}">
							<input type="hidden" id="channelId" th:value="${channelId}">
							<div class="inpItem flex">
								<span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</span>
								<input type="text" class="names" maxlength="10" placeholder="请输入真实姓名" id="name">
							</div>
							<div class="inpItem flex">
								<span>企业名称:</span>
								<input type="text" class="company_name" maxlength="40" placeholder="请输入企业名称" id="companyName" >
							</div>
							<div class="inpItem flex">
								<span>手机号码:</span>
								<input type="tel" class="mobile" maxlength="11" placeholder="请输入手机号码" id="mobile">
							</div>
							<a class="login" href="javascript:;" id="submit">立即申请</a>
						</div>
					</div>
				</div>
			</div>
            <div id="mask" class="mask"></div>
            <script th:src="@{/static/js/jquery/jquery-3.2.1.min.js}"></script>
			<script type="text/javascript">
				$(function() {
					var tel_reg=/^1(3|4|5|6|7|8|9)\d{9}$/;

					$("#submit").click(function () {

						var name = $("#name").val();
						var companyName = $("#companyName").val();
						var mobile = $("#mobile").val();
						var productId = $("#productId").val();
						var channelId = $("#channelId").val();
						if(name==''){
							alert('请输入姓名');
							return;
						}
						if(companyName==''){
                          alert('请输入企业名称');
                          return;
                        }
						if(mobile==''){
							alert('请输入手机号');
							return;
						}else if(!(tel_reg.test(mobile))){
							alert('手机号格式不正确');
							return;
						}
						var data = {
							name:name,
							companyName:companyName,
							mobile:mobile,
							productId:productId,
							channelId:channelId
						};
						$.ajax({
							url:"/loans/apply/add",
							type:'POST',
							data:data,
							dataType:'json',
							beforeSend: function(){
                                showMask();
							},success:function( res ){
								if (res.code == 10000) {
									if(res.data.redirectType == 1){
										window.location.href ="/loans/apply/other?url=" + res.data.url;
									} else {
										window.location.href = res.data.url ;
									}
								}else{
									alert(res.message);
                                    hideMask();
								}
							},error: function (data) {
								alert(data.responseJSON.message);
                                hideMask();

							},complete : function(XMLHttpRequest,status){ //请求完成后最终执行参数

                            }
						});
					});
                    function showMask(){
                        $("#mask").css("height",$(document).height());
                        $("#mask").css("width",$(document).width());
                        $("#mask").show();
                    }

                    function hideMask(){
                        $("#mask").hide();
                    }
				});
			</script>
			<script>
				;(function(doc, win) {
					// 分辨率Resolution适配
					var docEl = doc.documentElement,
						resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
						recalc = function() {
							var clientWidth = docEl.clientWidth;
							if (!clientWidth) return;
							if (clientWidth > 500) clientWidth = 500;
							docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
						};
					// 如果浏览器不支持addEventListener，则中止
					if (!doc.addEventListener) return;
					win.addEventListener(resizeEvt, recalc, false);
					doc.addEventListener('DOMContentLoaded', recalc, false);

				})(document, window);
			</script>
		</div>
	</body>
</html>
